<template>
  <Modal v-model="status"
         title="查看事件"
         width="1000">
    <Form :model="moduleItem"
          :label-width="100">
      <Form-item label="事件"
                 prop="msg">
        <Input v-model="moduleItem.msg"
               readonly />
      </Form-item>
      <Form-item label="发送人"
                 prop="dep_name">
        <Input v-model="moduleItem.dep_name"
               readonly />
      </Form-item>
      <Form-item label="时间"
                 prop="date_time">
        <Input v-model="moduleItem.date_time"
               readonly />
      </Form-item>
      <Form-item label="事件处理过程"
                 v-if="!patrol"
                 prop="date_time">
        <Table ref="table"
               :data="jinduData"
               :columns="jinduColumns"
               stripe />
      </Form-item>
      <Form-item label="事件处理时间轴"
                 v-if="!patrol"
                 prop="time_line">
        <Timeline>
          <TimelineItem v-for="(v,index) in jinduData"
                        :key="index">
            <p style="font-size:14px;font-weight:bold;">{{v.date_time}}</p>
            <p style="padding-left: 5px">{{v.overview}}</p>
          </TimelineItem>
        </Timeline>
      </Form-item>
    </Form>
    <div v-if="patrol"
         ref="JMap" />
  </Modal>
</template>

<script>
import { reqPost } from 'global/axios';

export default {
  props: {
    types: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },

  data() {
    return {
      status: false,
      patrol: false,
      moduleItem: {},
      jinduData: [],
      jinduColumns: [
        {
          title: '时间',
          key: 'date_time',
        },
        {
          title: '过程',
          key: 'overview',
        },
      ],
    };
  },

  methods: {
    show(row) {
      if (row.target === '签到') {
        return;
      } else if (row.target === '举报') {
        this.getComplaint(row.id);
        this.patrol = false;
      } else if (row.target === '巡查') {
        this.patrol = true;
        this.getTableData(row.id);
      } else {
        this.patrol = false;
      }
      this.status = true;
      this.moduleItem.msg = row.msg;
      this.moduleItem.dep_name = row.location.dep_name;
      this.moduleItem.date_time = row.date_time;
    },

    async getComplaint(report_no) {
      let { status, result } = await reqPost({
        data: {
          searchValue: {
            report_no,
          },
          order: { date_time: 1 },
        },
        url: '/bus/record/list',
      });

      status && (this.jinduData = result.result);
    },

    async getTableData(patrol_no) {
      let { status, result } = await reqPost({
        data: {
          searchValue: {
            patrol_no,
          },
        },
        url: this.types
          ? '/emergency/patrol/mypatrol'
          : '/emergency/patrol/list',
      });

      if (status) {
        this.mapModal = true;
        this.showMap(result.result[0]);
      }
    },

    async showMap({ route, patrol_no }) {
      let center = new qq.maps.LatLng(route[0].lat, route[0].lng);
      let map = new qq.maps.Map(this.$refs.JMap, {
        center,
        zoom: 16,
      });

      new qq.maps.Polyline({
        path: route.map(({ lat, lng }) => {
          return new qq.maps.LatLng(lat, lng);
        }),
        strokeColor: 'FF4040',
        strokeWeight: 2,
        editable: false,
        map,
      });

      let that = this;

      let { status, result } = await reqPost({
        data: {
          searchValue: {
            patrol_no,
          },
        },
        url: '/emergency/patrol/find',
      });

      if (status) {
        let { reports, scenerys } = result;
        if (reports.length > 0) {
          let html = '';
          reports.map(({ lat, lng, photos, report_time, overview }) => {
            let marker = new qq.maps.Marker({
              position: new qq.maps.LatLng(lat, lng),
              map,
            });
            let anchor = new qq.maps.Point(0, 39);
            let size = new qq.maps.Size(42, 68);
            let origin = new qq.maps.Point(0, 0);
            let markerIcon = new qq.maps.MarkerImage(
              '../../../../../static/img/weizhi.png',
              size,
              origin,
              anchor
            );
            marker.setIcon(markerIcon);
            let info = new qq.maps.InfoWindow({
              map,
            });
            for (let i = 0; i < photos.length; i++) {
              html += `<img style="max-width:200px;max-height:200px;margin-right:5px;" src="${photos[i]}">`;
            }
            qq.maps.event.addListener(marker, 'click', () => {
              info.open();
              info.setContent(
                `<div class="bigModal"><p>${report_time}</p><p>${overview}</p><div class="img">${html}</div></div>`
              );
              setTimeout(function () {
                $('.smallImg').bind('click', function () {
                  that.showImg($(this).attr('src'));
                });
              }, 100);

              info.setPosition(new qq.maps.LatLng(lat, lng));
            });
          });
        }

        if (scenerys.length > 0) {
          scenerys.map(({ lat, lng, photo, date_time }) => {
            let html = '';
            let marker = new qq.maps.Marker({
              position: new qq.maps.LatLng(lat, lng),
              map,
            });
            let anchor = new qq.maps.Point(0, 39);
            let size = new qq.maps.Size(42, 68);
            let origin = new qq.maps.Point(0, 0);
            let markerIcon = new qq.maps.MarkerImage(
              '../../../../../static/img/gis1.png',
              size,
              origin,
              anchor
            );
            marker.setIcon(markerIcon);
            let info = new qq.maps.InfoWindow({
              map,
            });
            html += `<img style="max-width:500px;max-height:280px;margin-right:5px;" src="${photo}">`;
            qq.maps.event.addListener(marker, 'click', function () {
              info.open();
              info.setContent(
                `<div class="bigModal1"><p>${date_time}</p><div class="img">${html}</div></div>`
              );
              setTimeout(function () {
                $('.smallImg').bind('click', function () {
                  that.showImg($(this).attr('src'));
                });
              }, 100);

              info.setPosition(new qq.maps.LatLng(lat, lng));
            });
          });
        }
      }
    },
  },
};
</script>

<style>
</style>